<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this 
        1.在程序中调用方法(函数), this指向调用者(谁调用this就指向谁)
        2.在程序中谁调用方法(函数), 那么this就指向谁(this就是谁)



        // 自定义属性
        //应用场景: 网页中tab栏切换效果
        //建立一个新的属性标签,用以存储数据或字符.

        // datase方式
        //设置自定义属性语法 
        // 标签对象.dataset.自定义属性名 = 值
        //转变的样式为 <div data-hero = 'one' ></div >
        let div = document.querySelector('div')
        div.dataset.hero = 'one'
        //获取自定义属性方法为 
        // 标签对象.dataset.自定义属性名
        div.dataset.hero

        // 通过 setAttribute() /  getAttribute()
        // 除了可以设置自定义属性,还可以设置获取标准属性
        // 设置
        标签对象.setAttribute('data-自定义属性', 值)
        // 获取
        标签对象.getAttribute('data-自定义属性')




        // 注册事件
        // DOM L0
        // 语法 标签对象.on事件类型 = function () { }
        1. 本质上就是将一个函数赋值给一个属性
        2. 因为是一个属性, 所以会被覆盖, 所以只能有一个封装函数

        // DOM L1
        // 语法 标签对象.addEventListener('事件类型', function () { })
        1. 本质上就是调用了一个方法
        2. 同一种事件类型可以注册多次



        // 移除事件
        // 移除DOML0事件
        // 标签对象.on事件类型 = null
        btn.onclick = function () {
            console.log('123123');
        }
        btn2.onclick = function () {
            btn1.onclick = null
        }
        // 移除DOML1事件
        // 注册事件的时候必须单独定义一个函数
        // 标签对象.removeEventListener('事件类型', 函数名)
        function fn() {
            console.log(55555);
        }
        btn.addEventListener('click', fn)
        btn2.addEventListener('click', function () {
            btn.removeEventListener('click', fn)
        })




        // 事件类型
        click        单击
        dblclick     双击
        mouseenter   鼠标进入事件
        mouseleave   鼠标离开事件
        mousemove    鼠标移动事件


        // 事件对象参数
        // 在事件中设置一个参数,该参数叫事件对象参数
        offsetX     相对当前事件源
        clientX     相对于页面(不包括滚动条)
        pageX       相对于页面(包括滚动条)
        screenY     相对于整个屏幕
        // 例:  c 这个形参就是事件对象参数
        let div = document.querySelector('div')
        div.onclick = function (c) {
            console.log(c.clientX);
        }



        // 函数的各种叫法
        // 具名函数
        // 有函数名叫具名函数
        // 匿名函数
        // 没有函数名叫匿名函数
        // 高阶函数
        // 也是一个函数
        // 特点
        // 参数是函数
        // 定时器就是一个典型的高阶函数
        // 回调函数
        // 在高阶函数中, 表示参数的函数称为回调函数
        // 定时器中表示参数的函数叫回调函数
        // 自调用函数(自执行函数)
        // 函数自己调用自己
        // 语法: (函数体)()
    </script>
</body>

</html>